<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/bootstrap-3.3.7/dist/css/bootstrap.css">
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel="stylesheet" href='/stylesheets/article.css'>
    <link rel='stylesheet' href='/stylesheets/liuyan.css' />
    <link rel="stylesheet" href='/stylesheets/comment.css'>
    <link rel="stylesheet" href="/stylesheets/myAlert.css">

    <script src="/javascripts/jquery.min.js"></script>
    <script src='/bootstrap-3.3.7/dist/js/bootstrap.min.js'></script>
    <script src='/javascripts/jquery.flexText.js'></script>
    <script src='/javascripts/myAlert.js'></script>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12 mynav">
          <nav class="navbar navbar-default">
            <div class="container">
              <!-- Brand and toggle get grouped for better mobile display -->
              <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">主页</a>
              </div>

              <!-- Collect the nav links, forms, and other content for toggling -->
              <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                  <!-- <li><a href="/">新鲜事</span></a></li> -->
                  <!-- <li><a href="#">问答</a></li> -->
                  <li><a href="/yangsheng">养生</a></li>
                  <li><a href="/meishi">美食</a></li>
                  <li><a href="/hufu">护肤</a></li>
                  <!-- <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">我的圈子 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                      <li><a href="#">佛系排行榜</a></li>
                      <li><a href="#">佛系笔记</a></li>
                      <li><a href="#">佛系活动</a></li>
                    </ul>
                  </li> -->
                </ul>
                <ul class="nav navbar-nav navbar-right">
                  <% if(typeof(username)=='undefined') { %>
                    <li><a class="sm_a" href="/login">登录</a></li>
                    <li><a class="sm_a" href="#">注册</a></li>
                  <% } %>
                  <% if(typeof(username)!='undefined') { %>
                    <% if(username!='') { %>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><%= username %> <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                          <li><a href="/myHome">我的主页</a></li>
                          <li><a href="/write">写博客</a></li>
                          <li><a href="/setting">资料设置</a></li>
                          <li role="separator" class="divider"></li>
                          <li><a href="/exit">退出登录</a></li>
                        </ul>
                      </li>
                    <% } %>
                    <% if(username=='') { %>
                      <li><a class="sm_a" href="/login">登录</a></li>
                      <li><a class="sm_a" href="#">注册</a></li>
                    <% } %>
                   <% } %>

                </ul>
                <form class="navbar-form navbar-right">
                  <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                  </div>
                  <i class="glyphicon glyphicon-search mysearch"></i>
                </form>
              </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
          </nav>
        </div>
      </div>
    </div>
  <section id="con">
  	<div class="container">
    	<div class="row">
        <!-- 左边列表 -->
    		<div class="col-md-3 col-md-offset-1 con_left">
    			<img src="<%= data[0].pic %>" alt="">
	    		<div>
					<ul class="list-group guess">
          <li class="list-group-item ">其他同类型文章</li>
          <% for (var i=0; i<data2.length; i++) { %>
					  <a href="/article?title=<%=data2[i].title %>&author=<%=data2[i].author %>"><li class="list-group-item other_con"><%= data2[i].title %></li></a>
          <% } %>
          <!-- <li class="list-group-item ">该作者其他文章</li>
          <% for (var i=0; i<data3.length; i++) { %>
            <a href="/article?title=<%=data3[i].title %>&author=<%=data3[i].author %>"><li class="list-group-item other_con"><%= data3[i].title %></li></a>
          <% } %> -->
					</ul>
				</div>
    		</div>
        <!-- 右边内容 -->
    		<div class="col-md-7 con_right">
          <div class="main_con">
            <h3 class="text-center"><%= data[0].title %></h3>
            <div class="des clearfix">
              <time class="pull-right"><%= data[0].date %></time>
              <span class="pull-right author">来自<%= data[0].author %></span>
            </div>
            <br>

            <p><%= data[0].content %></p>
          </div>
          <div class="commentAll">
              <!--评论区域 begin-->
              <div class="reviewArea clearfix">
                  <textarea class="content comment-input" placeholder="发表你的评论......" onkeyup="keyUP(this)"></textarea>
                  <a href="javascript:;" class="plBtn">评论</a>
              </div>
              <!--评论区域 end-->
              <!--回复区域 begin-->
              <div class="comment-show">
              <% for (var i=0; i<data4.length; i++) { %>
                  <div class="comment-show-con clearfix">
                      <div class="comment-show-con-img pull-left myimg"><img src="/images/1.jpg" alt=""></div>
                      <div class="comment-show-con-list pull-left clearfix">
                          <div class="pl-text clearfix">
                              <a href="#" class="comment-size-name"><%= data4[i].name %> : </a>
                              <span class="my-pl-con">&nbsp;<%= data4[i].content %></span>
                          </div>
                          <div class="date-dz">
                              <span class="date-dz-left pull-left comment-time"><%= data4[i].date %></span>
                              <div class="date-dz-right pull-right comment-pl-block">
                                  <a href="javascript:;" class="removeBlock">删除</a>
                                  <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a>
                                  <span class="pull-left date-dz-line">|</span>
                                  <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num"><%= data4[i].zan %></i>)</a>
                              </div>
                          </div>
                          <div class="hf-list-con"></div>
                      </div>
                  </div>
                <% } %>
              </div>
              <!--回复区域 end-->
          </div>
    		</div>
    	</div>
    </div>
  </section>
  <script type="text/javascript">
      $(function () {
          $('.content').flexText();
      });
  </script>
  <!--textarea限制字数-->
  <script type="text/javascript">
      function keyUP(t){
          var len = $(t).val().length;
          if(len > 139){
              $(t).val($(t).val().substring(0,140));
          }
      }
  </script>
  <!--点击评论创建评论条-->
  <script type="text/javascript">
      $('.commentAll').on('click','.plBtn',function(){
          var myDate = new Date();
          //获取当前年
          var year=myDate.getFullYear();
          //获取当前月
          var month=myDate.getMonth()+1;
          //获取当前日
          var date=myDate.getDate();
          var h=myDate.getHours();       //获取当前小时数(0-23)
          var m=myDate.getMinutes();     //获取当前分钟数(0-59)
          if(m<10) m = '0' + m;
          var s=myDate.getSeconds();
          if(s<10) s = '0' + s;
          var now=year+'-'+month+"-"+date+" "+h+':'+m+":"+s;
          //获取输入内容
          var oSize = $(this).siblings('.flex-text-wrap').find('.comment-input').val();
          console.log(oSize);
          var name = '<%= username %>';
          if(name=='') name='游客'
          //动态创建评论模块
          oHtml = '<div class="comment-show-con clearfix"><div class="comment-show-con-img pull-left myimg"><img src="images/1.jpg" alt=""></div> <div class="comment-show-con-list pull-left clearfix"><div class="pl-text clearfix"> <a href="#" class="comment-size-name">'+ name +' : </a> <span class="my-pl-con">&nbsp;'+ oSize +'</span> </div> <div class="date-dz"> <span class="date-dz-left pull-left comment-time">'+now+'</span> <div class="date-dz-right pull-right comment-pl-block"><a href="javascript:;" class="removeBlock">删除</a> <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a> <span class="pull-left date-dz-line">|</span> <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">0</i>)</a> </div> </div><div class="hf-list-con"></div></div> </div>';
          if(oSize.replace(/(^\s*)|(\s*$)/g, "") != ''){
              $(this).parents('.reviewArea ').siblings('.comment-show').prepend(oHtml);
              $(this).siblings('.flex-text-wrap').find('.comment-input').prop('value','').siblings('pre').find('span').text('');
          }
          $.ajax({
            url: '/addcomment',
            type: 'post',
            dataType: 'json',
            data: {
              title:'<%= data[0].title %>',
              author:'<%= data[0].author %>',
              name:name,
              content: oSize,
              date:now,
              zan:0
            },
          })
          
      });
  </script>
  <!--删除评论块-->
  <script type="text/javascript">
  console.log('删除')
      $('.commentAll').on('click','.removeBlock',function(){
          var a = $(this);
          var myDate = new Date();
          //获取当前年
          var year=myDate.getFullYear();
          //获取当前月
          var month=myDate.getMonth()+1;
          //获取当前日
          var date=myDate.getDate();
          var h=myDate.getHours();       //获取当前小时数(0-23)
          var m=myDate.getMinutes();     //获取当前分钟数(0-59)
          if(m<10) m = '0' + m;
          var s=myDate.getSeconds();
          if(s<10) s = '0' + s;
          var now=year+'-'+month+"-"+date+" "+h+':'+m+":"+s;
          //获取输入内容
          var oSize = $(this).parents('.comment-show-con').find('.my-pl-con').html().substring(6);
          console.log('fdfdf:'+oSize);
          var name = '<%= username %>';
          var oT = $(this).parents('.date-dz-right').parents('.date-dz').parents('.all-pl-con');
          if(oT.siblings('.all-pl-con').length >= 1){
              oT.remove();
          }else {
              $(this).parents('.date-dz-right').parents('.date-dz').parents('.all-pl-con').parents('.hf-list-con').css('display','none')
              oT.remove();
          }
          $.ajax({
            url: '/delcomment',
            method: 'post',
            dataType: 'json',
            data: {
              title:'<%= data[0].title %>',
              author:'<%= data[0].author %>',
              name:name,
              content: oSize,
            },
            success:function(res){
              console.log(res)
              if(parseInt(res)==1){
                $(a).parents('.date-dz-right').parents('.date-dz').parents('.comment-show-con-list').parents('.comment-show-con').remove();
              }
              else{
                $.myToast('对不起！您没有操作权限！');
              }
            }
          })

      })
  </script>
  <!--点赞-->
  <script type="text/javascript">
      $('.comment-show').on('click','.date-dz-z',function(){
          var zNum = $(this).find('.z-num').html();
          if($(this).is('.date-dz-z-click')){
              zNum--;
              $(this).removeClass('date-dz-z-click red');
              $(this).find('.z-num').html(zNum);
              $(this).find('.date-dz-z-click-red').removeClass('red');
          }else {
              zNum++;
              $(this).addClass('date-dz-z-click');
              $(this).find('.z-num').html(zNum);
              $(this).find('.date-dz-z-click-red').addClass('red');
          }
      })
  </script>
  </body>
</html>
